<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8">
        <chart-card :loading="loading" title="个人信息" :total="'Hi, ' + dataInfo.userName">
          <a-tooltip title="手机号变更请联系客服" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-tag color="#f50" slot="total" v-if="!dataInfo.name" style="margin-left: 20px;">立即认证</a-tag>
          <div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="mobile" style="fontSize: 16px; margin-right:5px;" />注册手机号:
              </span>
              <span class="flex-1 value-label">{{dataInfo.phone}}</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="user" style="fontSize: 16px; margin-right:5px;" />实名认证:
              </span>
              <span class="flex-1 value-label">{{dataInfo.name || "暂未认证"}}</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="lock" style="fontSize: 16px; margin-right:5px;" />提现密码:
              </span>
              <span class="flex-1 flex-row value-label">
                <span class="flex-1 value-attr attr-x">默认的为 000000</span>
                <span class="btn-span" @click="toModifyPwd">修改</span>
              </span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="mail" style="fontSize: 16px; margin-right:5px;" />绑定邮箱:
              </span>
              <span class="flex-row flex-1 value-label">
                <span class="flex-1 value-attr">暂未绑定~</span>
                <span class="btn-span" @click="editEmail">修改</span>
              </span>
            </div>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8">
        <chart-card :loading="loading" title="余额信息" :total="'¥ ' + dataInfo.totalMoney">
          <a-tooltip title="余额提现最低 ¥3000 起" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <a-tag
            color="#2db7f5"
            slot="total"
            style="margin-left: 20px;padding: 0 20px;"
            @click="gotoWithdrawHandler"
          >提现</a-tag>
          <div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="money-collect" style="fontSize: 16px; margin-right:5px;" />冻结余额:
              </span>
              <span class="flex-1 value-label" style="color:#f50">{{'¥ ' + dataInfo.freezeMoney}}</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="money-collect" style="fontSize: 16px; margin-right:5px;" />可用余额:
              </span>
              <span class="flex-1 value-label" style="color:#87d068">{{'¥ ' + enabledMoney}}</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="book" style="fontSize: 16px; margin-right:5px;" />今日订单:
              </span>
              <span class="flex-1 value-label value-attr">0</span>
            </div>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8">
        <chart-card :loading="loading" title="客服信息" total="在线客服">
          <div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="mobile" style="fontSize: 16px; margin-right:5px;" />客服电话:
              </span>
              <span class="flex-1 value-label value-attr">暂未设置~</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="qq" style="fontSize: 16px; margin-right:5px;" />QQ:
              </span>
              <span class="flex-1 value-label value-attr">暂未设置~</span>
            </div>
            <div class="flex-row row-div">
              <span>
                <a-icon type="wechat" style="fontSize: 16px; margin-right:5px;" />微信:
              </span>
              <span class="flex-1 value-label value-attr">暂未设置~</span>
            </div>
          </div>
        </chart-card>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="16">
        <a-card
          :loading="loading"
          :bordered="false"
          title="产品与统计信息"
          :style="{ marginTop: '30px' }"
        >暂无统计~</a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8">
        <a-card
          :loading="loading"
          :bordered="false"
          title="会员公告"
          :style="{ marginTop: '30px' }"
        >暂无消息~</a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/chartCard/Index'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import { queryIndexInfo } from '@/api/api'

export default {
  name: 'Analysis',
  components: {
    ATooltip,
    ACol,
    ChartCard
  },
  data() {
    return {
      loading: true,
      loaded: false,
      dataInfo: {}, //数据
      center: null,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />
    }
  },
  computed: {
    /**
     * 可提现金额
     */
    enabledMoney() {
      if (this.dataInfo.totalMoney == '0.00' || this.dataInfo.totalMoney == 0) return '0.00'
      let enabledMoney = Number(this.dataInfo.totalMoney) * 100 - Number(this.dataInfo.freezeMoney) * 100
      return (enabledMoney / 100).toFixed(2)
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      queryIndexInfo().then(res => {
        if (res.code == 0) {
          this.loading = !this.loading
          const { data } = res
          this.dataInfo = data
        } else {
          this.requestFail(res)
        }
      })
    },

    toModifyPwd() {
      this.$router.push({ name: 'CashPwdReset' })
    },

    editEmail() {
      this.$message.info('暂未开放')
    },

    gotoWithdrawHandler() {
      this.$router.push({ name: 'WithdrawApply' })
    },

    /**
     * 请求错误
     */
    requestFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: (err || {}).msg || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.row-div {
  padding-top: 20px;
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.value-label {
  padding-left: 10px;
  font-size: 16px;
  color: #1890ff;
}

.value-attr {
  color: #3c4043;
  opacity: 0.8;
}

.attr-x {
  color: rgb(255, 85, 0) !important;
}

.btn-span {
  cursor: pointer;
  padding: 0 5px;
}

.btn-span:hover {
  text-decoration: underline;
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
